<template>
  <div  class="container">
    <detail-banner
      :sightName="sightName"
      :bannerImg="bannerImg"
      :bannerImgs="gallaryImgs"
    ></detail-banner>
    <detail-header></detail-header>
    <div class="content">
      <detail-list :list="list"></detail-list>
      <div id="tab_tour_advantage">
        <!-- react-empty: 806 -->
        <div class="m-route feature">
          <h2 class="title">特色路线</h2>
          <div class="m-richtext reset-padding reset-pseudo-border">
            <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_vs_tts/79116b9c-6972-43fc-9fa5-35d6f309553e.png_r_750x612x90_aa17f66d.png">
            <img width="100%" src="https://imgs.qunarzz.com/vs_ceph_vs_tts/36f5cc1a-2330-4ae0-9eff-819936875bdc.png_r_750x612x90_dd2d7bc3.png">
            <img width="100%" height="250" src="https://imgs.qunarzz.com/vs_ceph_vs_tts/e06eccf4-6f98-48c3-9d9f-108b578a9358.png_r_750x612x90_1525b524.png">
            <img width="100%" height="250" src="https://imgs.qunarzz.com/vs_ceph_vs_tts/aca7ee3d-fd70-483b-a65b-4079526a7ee7.png_r_750x612x90_d1891b00.png">
            <img width="100%" height="250" src="https://imgs.qunarzz.com/vs_ceph_vs_tts/aca7ee3d-fd70-483b-a65b-4079526a7ee7.png_r_750x612x90_d1891b00.png"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import DetailBanner from '@/components/detail/Banner'
  import DetailHeader from '@/components/detail/Header'
  import DetailList from '@/components/detail/List'

  export default {
    name: 'Detail',
    components: {
      DetailBanner,
      DetailHeader,
      DetailList
    },
    data () {
      return {
        sightName: '',
        bannerImg: '',
        gallaryImgs: [],
        list: []
      }
    },
    async asyncData (context) {
      const { data } = await context.app.$axios.get("/app/api/detail.json")
      return  {
        sightName:data.data.sightName,
        bannerImg:data.data.bannerImg,
        gallaryImgs:data.data.gallaryImgs,
        list:data.data.categoryList
      }
    },
    methods: {

    },
    mounted () {

    }
  }
</script>

<style lang="stylus" scoped>
    .content
      height: auto
    .title
      font-size:.5rem
      margin: 0.5rem
      text-align: center
</style>
